import { FC } from 'react';
import { Layout, Dropdown, Avatar, Menu } from 'antd';
import { UserOutlined, LogoutOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import styles from './HeaderNav.module.css';
import type { MenuProps } from 'antd';
import { authApi } from 'services';

const { Header } = Layout;

const HeaderNav: FC = () => {
  const navigate = useNavigate();

  const username = localStorage.getItem('username') || '';

  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
    if (key === 'profile') {
      navigate('/profile');
    } else if (key === 'logout') {
      authApi.logout().then(() => {
        localStorage.removeItem('token');
        localStorage.removeItem('username');
        localStorage.removeItem('identity'); // 角色
        navigate('/login');
      });
    }
  };

  return (
    <Header className={styles.header}>
      <div className={styles.logo}>产业创新生态系统</div>
      <div className={styles.rightSection}>
        <Menu
          mode="horizontal"
          theme="dark"
          style={{ background: 'transparent', borderBottom: 'none' }}
          selectedKeys={[]}
          items={[
            // {
            //   key: 'page-manage',
            //   icon: <SettingOutlined />,
            //   label: '页面管理',
            //   onClick: () => navigate('/page-manage')
            // }
          ]}
        />
        <div className={styles.userInfo}>
          <Dropdown
            menu={{
              items: [
                {
                  key: 'profile',
                  icon: <UserOutlined />,
                  label: '个人中心'
                },
                {
                  type: 'divider'
                },
                {
                  key: 'logout',
                  icon: <LogoutOutlined />,
                  label: '退出登录'
                }
              ],
              onClick: handleMenuClick
            }}
            placement="bottomRight"
          >
            <span className={styles.userDropdown}>
              <Avatar icon={<UserOutlined />} />
              <span className={styles.username}>用户{username}</span>
            </span>
          </Dropdown>
        </div>
      </div>
    </Header>
  );
};

export default HeaderNav;